<template>
  <div class="carousel-container">
    <carousel animation="fade" :speed="1000" :interval="2000" :hoverStop="true">
      <div v-for="item in items" class="carousel-item-me">
        <slide >
          <img :src="item.imgUrl">
        </slide>
      </div>
    </carousel>
  </div>

</template>
<style lang="stylus" rel="stylesheet/stylus">
  .carousel-container
    width: 1218px
    height: 500px
    overflow: hidden
    .carousel-item-me
      width: 1200px
      height: 500px
      border-color: white
      border-radius: 10px
      overflow: hidden
      cursor: pointer
      text-align: center
      margin: 0 auto
</style>
<script>
  import carousel from 'atui/lib/carousel'
  export default {
    data: function () {
      return {
        items: [
          {'imgUrl': './static/imgs/banner/b1.png'},
          {'imgUrl': './static/imgs/banner/b2.png'},
          {'imgUrl': './static/imgs/banner/b3.png'}
        ]
      }
    },
    components: {
      'carousel': carousel,
      'slide': carousel.Slide
    },
    created () {

    }
  }
</script>